<script setup lang="ts">
	const props = defineProps({
		// 左侧符号
		icon: {
			type: String,
			required: false
		},
		// 标题
		title: {
			type: String,
			required: true
		},
		// 圆角
		topRadius: {
			type: Boolean,
			default: false
		},
		bottomRadius: {
			type: Boolean,
			default: false
		},
		// 分割线
		showDivider: {
			type: Boolean,
			default: true
		},
		// 居中文本显示
		center: {
			type: Boolean,
			default: false
		},
		// 路由
		route: {
			type: String
		},
		// 右侧是否为switch
		enableSwitch: {
			type: Boolean,
			default: false
		},
		desc: {
			type: String,
		}
	})
	import { useI18n } from 'vue-i18n';
	const { t, locale } = useI18n()
	
	const nav = () => {
		uni.navigateTo({
			url: props.route
		})
	}
</script>
<template>
	<view class="com-nav-block-container" :class="{'top-radius': topRadius, 'bottom-radius': bottomRadius}" @click="nav(route)">
		<view class="com-nav-block-main">
			<i :class="`iconfont ${icon}`" v-if="!center && icon"></i>
			<view class="title" :class="{'title-center': center}">{{t(title)}}</view>
			<slot name="right"></slot>
			<uni-icons type="right" color="#aaaaaa" v-if="!center && !enableSwitch"></uni-icons>
			<com-switch v-if="enableSwitch"></com-switch>
		</view>
		<view class="desc" v-if="desc">{{t(desc)}}</view>
	</view>
	<view class="divider" v-if="showDivider"></view>
</template>
<style scoped lang="scss">
	@import "@/static/font/iconfont.css";

	.com-nav-block-container {
		background-color: white;
		padding: 20rpx 15rpx 20rpx 30rpx;
		margin: 0 30rpx;
		
		.com-nav-block-main {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.iconfont {
			font-size: 45rpx;
			margin-right: 35rpx;
			color: black;
			background-color: white;
		}

		.title {
			font-size: 28rpx;
			flex: 1;
		}

		.title-center {
			text-align: center;
		}
		
		.desc {
			color: $sub-title-text-color;
			font-size: 24rpx;
			background-color: white;
			padding-bottom: 10rpx;
		}
	}

	.top-radius {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.bottom-radius {
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		margin-bottom: 40rpx;
	}

	.divider {
		width: calc(100vw - 80rpx);
		margin-left: 50rpx;
		background-color: #e6e6e6;
		height: 1rpx;
	}
</style>